<template>
  <div class="flex-colunm">
    <h1 class="main-title">
      哮喘控制测试问卷 (asthma control test, ACT)
    </h1>
    <p class="desc">
      适用年龄：≥12岁
    </p>
    <el-form ref="form" :rules="rules" :model="form" label-position="top">
      <el-form-item  :key="item.key" :label="item.name" v-for="item in dataList" :prop="item.key">
        <el-radio-group v-model="form[item.key]">
          <el-radio v-for="radio in item.list" :key="radio.value"  :label="radio.value">{{radio.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-button @click="saveClick">提交问卷</el-button>
    </el-form>
  </div>
</template>
<script>
  import func from "@/util/func";
  export default {

    data(){
      return{
        rules:{
          q1: { required: true, message: '请选择', trigger: 'change' },
          q2: { required: true, message: '请选择', trigger: 'change' },
          q3: { required: true, message: '请选择', trigger: 'change' },
          q4: { required: true, message: '请选择', trigger: 'change' },
          q5: { required: true, message: '请选择', trigger: 'change' },
        },
        dataList:[
          {
            key:'q1',
            name:'1. 过去4周在工作、学习或家中，有多少时间哮喘妨碍您进行日常活动？',
            list:[
              {
                value:1,
                name:'所有时间'
              },{
                value:2,
                name:'大多数时间'
              },{
                value:3,
                name:'有些时候'
              },{
                value:4,
                name:'极少时候'
              },{
                value:5,
                name:'没有时间'
              }
            ]
          }, {
            key:'q2',
            name:'2. 过去4周您有多少次呼吸困难？',
            list:[
              {
                value:1,
                name:'≥1次/日'
              },{
                value:2,
                name:'1次/日'
              },{
                value:3,
                name:'3-6次/周'
              },{
                value:4,
                name:'1-2次/周'
              },{
                value:5,
                name:'完全没有'
              }
            ]
          },{
            key:'q3',
            name:'3. 过去4周因为哮喘症状，您有多少次在夜间醒来，或早上鼻平时早醒？',
            list:[
              {
                value:1,
                name:'≥4次/周'
              },{
                value:2,
                name:'2-3次/周'
              },{
                value:3,
                name:'1次/周'
              },{
                value:4,
                name:'1-2次'
              },{
                value:5,
                name:'没有'
              }
            ]
          },{
            key:'q4',
            name:'4. 过去4周您有多少次使用急性药物？',
            list:[
              {
                value:1,
                name:'≥3次/日'
              },{
                value:2,
                name:'1-2次/日'
              },{
                value:3,
                name:'2-3次/周'
              },{
                value:4,
                name:'≤1次/周'
              },{
                value:5,
                name:'没有'
              }
            ]
          },{
            key:'q5',
            name:'5. 您如何评估过去4周您自身的哮喘控制情况',
            list:[
              {
                value:1,
                name:'没有控制'
              },{
                value:2,
                name:'控制很差'
              },{
                value:3,
                name:'有时控制'
              },{
                value:4,
                name:'控制良好'
              },{
                value:5,
                name:'完全控制'
              }
            ]
          },


        ],
        form:{
          q1:'',
          q2:'',
          q3:'',
          q4:'',
          q5:'',
        }
      }
    },
    methods:{
      saveClick(){
        this.$refs.form.validate(valid=>{
          if(valid){
            const sum = func.arraySum(Object.values(this.form))
            this.$emit('sum',sum)
            this.$emit('close')
          }
        })
      }
    }
  }
</script>
<style>
  @import "index.css";
</style>
